<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/appendposter.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <title>添加广告</title>
</head>
<body style="background:#f1f5f8;">
    <div class="box">
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label width80">广告名称</label>
                <div class="col-sm-10">
                <input class="form-control w300">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label width80">所属名称</label>
                <div class="col-sm-10">
                <input class="form-control w300">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label width80">品牌名称</label>
                <div class="col-sm-10">
                <input class="form-control w300">
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label width80">销售人员</label>
                <div class="col-sm-10">
                <input class="form-control w300">
                </div>
            </div>
        </form>
        <!-- 广告背景图片 -->
        <div class="backImg">
            <div class="backImg_right">
                <span>广告背景图片</span>
                <button>浏览</button>
                <input type="file" style="margin-left:8px">
                <em style="color:red">图片格式不得超过10M，仅支持PNG.JPG.GIF格式</em>
            </div>
        </div>
        <!-- 预览图片 -->
        <div class="yulan">预览图片</div>
        <div class="advert">
            <label>类型</label>
            <select style="width:110px;height:30px">
                <option value="">影视</option>
                <option value="">图片</option>
            </select>
        </div>
        <div class="kao" style="overflow:hidden">
            <!-- 广告内容 -->
            <label style="float:left">广告内容</label>
            <div style="float:left">
                <input type="file" style="margin-left:8px">
            </div>
        </div>
        <div class="append_remove">
            <div class="remove"style="text-align:right">
                <div >X</div>
                <p style="font-size:20px;text-align: center;line-height: 90px">点击预览</p>
            </div>
            <div class="append">+</div>
        </div>
        <div style="width:100px;height:5px"></div>
        <!-- 间距 -->
        <div class="jianju">
            <label>顶距</label>
            <input type="text">
            <label>右距</label>
            <input type="text">
        </div>
        <div style="width:100px;height:5px"></div>
        <!-- 切换时间 -->
        <div class="oTime">
            <label for="">切换时间</label>
            <select>
                <option value="">自定义</option>
                <option value="">5</option>
                <option value="">8</option>
            </select>
            <input type="text" placeholder="请填写切换时间秒">
            <label for="">秒</label>
        </div>
        <button style="width:120px;color:white;background:rgba(39, 139, 221, 0.699);height:30px;border-radius:5px;margin-left:15%;margin-top:10px" data-toggle="modal" data-target="#myModal">下一步,投放设置</button>
        <div style="width:100px;height:5px"></div>
    </div>



    <!-- 弹出框1 投放设置 -->
    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="width:900px">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">投放设置</h4>
            </div>
            <div class="modal-body">
                <em>投放基础设置</em>
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">广告播放时间</label>
                        <select class="w100">
                            <option value="">5</option>
                            <option value="">10</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail2">投放时间段</label>
                        <input type="date" class="form-control" id="exampleInputEmail2">
                        <input type="date" class="form-control" id="exampleInputEmail2">
                    </div>
                    <div class="form-group">
                        <button class="aaBtn" style="height:30px">查询有排期的小区</button>
                    </div>
                </form>
                <div class="divBox">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">小区名称</label>
                            <input  class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName2">详细地址</label>
                            <input  class="form-control">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName2">维护人员</label>
                            <input  class="form-control">
                        </div>
                        <div class="formBox">
                            <div class="form-group">
                                <label for="exampleInputName2">区域检查</label>
                                <label for="exampleInputName2">省/直辖市</label>
                                <select class="w100">
                                    <option value="">haha</option>
                                    <option value="">haha</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">市</label>
                                <select class="w100">
                                    <option value="">haha</option>
                                    <option value="">haha</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">县/区</label>
                                <select class="w100">
                                    <option value="">haha</option>
                                    <option value="">haha</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputName2">所属区域</label>
                                <select class="w100">
                                    <option value="">haha</option>
                                    <option value="">haha</option>
                                </select>
                            </div>
                        </div>
                        <div class="aBtn">
                            <input class="oReset" type="reset" value="重置">
                            <input class="oSubmit" type="submit" value="筛选">
                        </div>
                    </form>
                </div>
                <!-- 小区信息 -->
                <ul class="oUl">
                    <li>
                        <input type="checkbox">
                        <p>小区名称:<em>%%%%</em></p>
                        <p>设备数量:<em>%%%%</em></p>
                        <p>广告位剩余:<em>%%%%</em></p>
                    </li>
                    <li>
                        <input type="checkbox">
                        <p>小区名称:<em>%%%%</em></p>
                        <p>设备数量:<em>%%%%</em></p>
                        <p>广告位剩余:<em>%%%%</em></p>
                    </li>
                    <li>
                        <input type="checkbox">
                        <p>小区名称:<em>%%%%</em></p>
                        <p>设备数量:<em>%%%%</em></p>
                        <p>广告位剩余:<em>%%%%</em></p>
                    </li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">返回上一步</button>
                <button type="button" class="btn btn-primary"data-toggle="modal" data-target="#myModal_two">投放</button>
            </div>
            </div>
        </div>
    </div>


    <!-- 弹出框2 投放 -->
    <div class="modal fade" id="myModal_two" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                    确定投放吗?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
            </div>
        </div>
    </div>
    
    <script src="./js/jquery-3.2.0.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</body>
</html>